<template>
  <view class="course-list-page">
    <!-- 顶部导航栏 -->
    <up-navbar title="名师课程" :bgColor="bgColor" height="50" fixed placeholder>
      <template #left>
        <up-icon name="arrow-left" @click="goBack"></up-icon>
      </template>
    </up-navbar>

    <!-- 搜索框 -->
    <view class="search-container">
      <up-search 
        v-model="searchKeyword" 
        placeholder="搜索课程" 
        :showAction="false" 
        @search="handleSearch"
        @clear="handleClear"
      ></up-search>
    </view>

    <!-- 分类标签 -->
    <up-sticky bgColor="#fff" customNavHeight="96">
      <up-tabs 
        :list="categoryList" 
        :current="currentCategory" 
        @click="changeCategory"
        :scrollable="false"
      ></up-tabs>
    </up-sticky>

    <!-- 课程列表 -->
    <view class="course-list">
      <up-waterfall :add-times="1" :columns="1" v-model="courseList" ref="waterfallRef" v-model:status="loadStatus">
        <template v-slot:column="{colList, colIndex}">
          <view class="course-item" v-for="(item, index) in colList" :key="index" @click="goToCourseDetail(item.id)">
            <CourseItem :course="item" />
          </view>
        </template>
      </up-waterfall>
    </view>

    <!-- 空状态 -->
    <view v-if="courseList.length === 0 && !isLoading" class="empty-state">
      <up-empty mode="data" text="暂无课程数据" />
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import CourseItem from '../components/course-item.vue'

// 页面数据
const bgColor = ref('#fff')
const searchKeyword = ref('')
const currentCategory = ref(0)
const loadStatus = ref('loadmore')
const isLoading = ref(false)

// 分类列表
const categoryList = reactive([
  { name: '全部' },
  { name: '书法基础' },
  { name: '楷书' },
  { name: '行书' },
  { name: '草书' },
  { name: '隶书' },
  { name: '篆书' }
])

// 课程列表数据
const courseList = reactive([])

// Waterfall组件引用
const waterfallRef = ref(null)

// 获取课程列表
const fetchCourseList = async (page = 1, category = 0, keyword = '') => {
  isLoading.value = true
  try {
    // 模拟API请求
    // 实际项目中应该替换为真实的API调用
    const mockData = generateMockCourseData(page, category, keyword)
    
    if (page === 1) {
      courseList.length = 0
    }
    
    courseList.push(...mockData)
    
    // 模拟分页状态
    if (mockData.length < 10) {
      loadStatus.value = 'nomore'
    } else {
      loadStatus.value = 'loadmore'
    }
  } catch (error) {
    console.error('获取课程列表失败:', error)
    uni.showToast({
      title: '获取课程列表失败',
      icon: 'none'
    })
    loadStatus.value = 'loadmore'
  } finally {
    isLoading.value = false
  }
}

// 生成模拟课程数据
const generateMockCourseData = (page, category, keyword) => {
  // 模拟数据
  const mockCourses = [
    {
      id: 1,
      title: '王羲之行书技法精讲',
      instructor: '张老师',
      cover: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
      duration: '2小时30分钟',
      price: 199,
      originalPrice: 299,
      students: 1280,
      rating: 4.8,
      isFree: false,
      isNew: true,
      category: 3
    },
    {
      id: 2,
      title: '颜真卿楷书入门',
      instructor: '李老师',
      cover: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
      duration: '1小时45分钟',
      price: 0,
      originalPrice: 0,
      students: 2450,
      rating: 4.9,
      isFree: true,
      isNew: false,
      category: 2
    },
    {
      id: 3,
      title: '草书笔法解析',
      instructor: '王老师',
      cover: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
      duration: '3小时15分钟',
      price: 299,
      originalPrice: 399,
      students: 860,
      rating: 4.7,
      isFree: false,
      isNew: false,
      category: 4
    },
    {
      id: 4,
      title: '隶书结构分析',
      instructor: '赵老师',
      cover: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
      duration: '2小时10分钟',
      price: 159,
      originalPrice: 199,
      students: 1120,
      rating: 4.6,
      isFree: false,
      isNew: true,
      category: 5
    },
    {
      id: 5,
      title: '篆书发展史',
      instructor: '陈老师',
      cover: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
      duration: '1小时30分钟',
      price: 0,
      originalPrice: 0,
      students: 980,
      rating: 4.5,
      isFree: true,
      isNew: false,
      category: 6
    },
    {
      id: 6,
      title: '书法基础笔画练习',
      instructor: '刘老师',
      cover: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
      duration: '2小时20分钟',
      price: 99,
      originalPrice: 149,
      students: 3200,
      rating: 4.8,
      isFree: false,
      isNew: false,
      category: 1
    }
  ]

  // 根据分类和关键词过滤
  let filteredData = mockCourses
  
  if (category > 0) {
    filteredData = filteredData.filter(item => item.category === category)
  }
  
  if (keyword) {
    filteredData = filteredData.filter(item => 
      item.title.includes(keyword) || 
      item.instructor.includes(keyword)
    )
  }
  
  // 模拟分页
  const pageSize = 10
  const start = (page - 1) * pageSize
  return filteredData.slice(start, start + pageSize)
}

// 页面跳转
const goBack = () => {
  uni.navigateBack()
}

const goToCourseDetail = (id) => {
  uni.navigateTo({
    url: `/gallery_pages/course/detail?id=${id}`
  })
}

// 搜索处理
const handleSearch = (value) => {
  currentCategory.value = 0
  fetchCourseList(1, 0, value)
}

const handleClear = () => {
  searchKeyword.value = ''
  fetchCourseList(1, currentCategory.value)
}

// 分类切换
const changeCategory = (item) => {
  currentCategory.value = item.index
  searchKeyword.value = ''
  fetchCourseList(1, item.index)
}

// 上拉加载更多
const loadmore = () => {
  if (loadStatus.value !== 'loadmore') return
  
  const nextPage = Math.ceil(courseList.length / 10) + 1
  fetchCourseList(nextPage, currentCategory.value, searchKeyword.value)
}

// 页面初始化
onMounted(() => {
  fetchCourseList()
})
</script>

<style lang="scss" scoped>
.course-list-page {
  min-height: 100vh;
  background: #f5f6fa;
  padding: 10rpx;
}

.search-container {
  padding: 20rpx;
  background: #fff;
  margin-bottom: 10rpx;
}

.course-list {
  margin-top: 20rpx;
}

.course-item {
  margin-bottom: 20rpx;
}

.empty-state {
  margin-top: 200rpx;
}
</style>